<template>
  <div class="dashboard-container">
      <!-- <el-card class="header-card"> -->
      <div>
        <div class="fl headL">
          <div class="headImg">
            <img v-imgerror="require('@/assets/common/head.jpg')" :src="userInfo.staffPhoto">
          </div>
          <div class="headInfoTip">
            <p class="firstChild">{{ userInfo.username }}</p>
            <p class="lastChild">手机 {{ userInfo.mobile }} 部门 {{ userInfo.companyName }}-{{ userInfo.departmentName }}</p>
            <p >入职时间 {{userInfo.timeOfEntry}}</p>
          </div>
        </div>
        <div class="fr" />
      </div>
    <!-- </el-card> -->
  </div>
</template>

<script>
import {mapState}from 'vuex'
export default {
    name:'Header',
computed:{
    ...mapState('user',['userInfo'])
}
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 10px;
  li {
    list-style: none;
  }
  .headImg {
    margin-left: 50px;
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #999;
          img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .headInfoTip {
    padding: 25px 0 0;
    margin-left: 170px;
    p {
      padding: 0 0 15px;
      margin: 0;
      &.firstChild {
        font-size: 14px;
      }
      &.lastChild {
        font-size: 24px;
        color: #7f8c8d;
      }
    }
  }
}

</style>